<template>
    <div class="wrapper">
        <v-head></v-head>
        <v-sidebar></v-sidebar>
        <div class="content-box" :class="{'content-collapse':collapse}">
            <v-tags></v-tags>
            <div class="content">
                <transition name="move" mode="out-in">
                    <keep-alive :include="tagsList">
                        <router-view></router-view>
                    </keep-alive>
                </transition>
            </div>
            <!--个人信息弹出界面-->
            <el-dialog title="个人信息" :visible.sync="personalInfoDialogVisible" width="480px">
                <div class="user-info">
                    <img src="../../assets/img/img.jpg" class="user-avator" alt>
                    <div class="user-info-cont">
                        <div class="user-info-name">张三丰</div>
                        <div>zhangsf-ab</div>
                    </div>
                </div>
                <div class="user-info-list">
                    角色：
                    <span>管理员</span>
                </div>
                <div class="user-info-list">
                    邮箱：
                    <span>zhangsf@glodon.com</span>
                </div>
                <div class="user-info-list">
                    部门：
                    <span>云服务技术部-算量平台部-造价国内产品部</span>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="personalInfoDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import vHead from "./Header.vue";
import vSidebar from "./Sidebar.vue";
import vTags from "./Tags.vue";
import bus from "./bus";
export default {
    data() {
        return {
            tagsList: [],
            collapse: false,
            personalInfoDialogVisible: false // 控制显示用户信息弹出窗
        };
    },
    components: {
        vHead,
        vSidebar,
        vTags
    },
    created() {
        bus.$on("collapse", msg => {
            this.collapse = msg;
        });

        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on("tags", msg => {
            let arr = [];
            for (let i = 0, len = msg.length; i < len; i++) {
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        });

        bus.$on("showPersonalInfo", msg => {
            this.personalInfoDialogVisible = msg;
        });
    }
};
</script>

<style scoped>
.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    /* border-bottom: 2px solid #ccc; */
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}
</style>
